<template>
    
    <el-table
        id="feereportcfg-table-feereportcfg"
        ref="tableRef"
        :data="tableData"
        v-bind="tableDefaultAttribute"
        row-key="id"
        :max-height="tableHeight"
        table-layout="auto"
        @row-dblclick="update"
    >
        <template #empty>
            <span>无数据</span>
        </template>
        <el-table-column type="selection" width="55" :align="'center'" />
        <template v-for="col in tableColumns" :key="col.prop">
            <el-table-column
                v-if="!col.isHidden"
                :align="col.align"
                :prop="col.prop"
                :label="col.label"
                :formatter="col.formatter"
                :type="col.type"
                :fixed="col.fixed"
                :width="col.width"
            >
            </el-table-column>
        </template>
    </el-table>

    <el-button-group class="bg">
        <el-space>
            <AddBtn @click="add" :formData="paramData"></AddBtn>
            <DelBtn @click="onDelete"></DelBtn>
            <RefreshBtn @click="onRefresh"></RefreshBtn>
        </el-space>
    </el-button-group>
    <el-dialog
        v-model="dialogUpdateVisible"
        title="费用报表定义维护"
        draggable
        destroy-on-close
        :center="true"
        width="50%"
    >
        <FeeReportDetail
            :cfg="paramData"
            @close="onCloseDialog"
        >
        </FeeReportDetail>
    </el-dialog>
</template>
<script setup lang="ts" name="FeeReportCfg">
import { ref, reactive, onMounted, toRaw } from 'vue';
import { ReportManagerModel, } from '@/common/types/report';
import { tableMaxHeightAdjust } from '@/common/const';
import { tableColumnDefault, tableDefaultAttribute } from '@/hooks/useTable';
import { TableColumn } from '@/common/types/app';
import { useAppStore } from '@/store/app';
import { storeToRefs } from 'pinia';
import { initObjectProperty, transFormatter } from '@/common/tools';
import AddBtn from '@/components/button/AddBtn.vue';
import DelBtn from '@/components/button/DelBtn.vue';
import { Request } from '@/app/request';
import { forEach, forEachRight, includes, isEmpty } from 'lodash';
import { ElMessage, ElMessageBox, TableInstance } from 'element-plus';
import FeeReportDetail from './FeeReportDetail.vue';
import NormalTable from '@/components/tables/NormalTable.vue';
const { SelectOptionFeeInOut } = storeToRefs(useAppStore());
const tableHeight = ref(600);
const tableData = ref<Array<ReportManagerModel>>([]);
const tableRef = ref<TableInstance>();
const paramData:ReportManagerModel = {};

const dialogUpdateVisible = ref(false);
onMounted(() => {
    tableHeight.value = window.innerHeight - tableMaxHeightAdjust;
});
const onFormatter = (_row: any, column: any, cellValue: any) => {
    let data: { value: string | number; label: string }[];
    if (column['property'] === 'fee_in_out') {
        data = SelectOptionFeeInOut.value;
    } else {
        return cellValue;
    }

    return transFormatter(cellValue, data);
};
const tableColumns = reactive<TableColumn[]>([
    {
        ...tableColumnDefault,
        order: 1,
        prop: 'r_name',
        label: '报表名称',
        formFieldItemType: 'input',
        width: 200,
    },
    
    
    {
        ...tableColumnDefault,
        order: 2,
        prop: 'fee_in_out',
        label: '收付类型',
        sortable: 'custom',
        formatter: onFormatter,
        formFieldItemType: 'single',
        optionalValues: SelectOptionFeeInOut.value,
        width: 150,
    },
    
]);
const add = () => {
    initObjectProperty(paramData);
    dialogUpdateVisible.value = true;
};
const update = (row: any, column: any, event: Event) => {
    // console.log('row', row);
    initObjectProperty(paramData);
    Object.assign(paramData, row);
    dialogUpdateVisible.value = true;
}
const onDelete = async () => {
    const rows: Array<ReportManagerModel> = tableRef.value?.getSelectionRows() ?? [];
    if (rows.length === 0) {
        ElMessage.info({
            message: '请选择要删除数据',
        });
        return;
    }
    const ids = Array<number>();
    const labels = Array<string>();
    forEach(rows, (v: ReportManagerModel) => {
        ids.push(v.id as number);
        labels.push(v.r_name as string);
    });

    const msg = labels.join(',     ');
    // const delids = ids.join(',');
    const cr = await ElMessageBox.confirm(msg, '确认删除如下报表', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            return true;
        })
        .catch(() => {
            return false;
        });
    if (cr) {
        //
        const req = new Request('费用报表定义删除', { ids });
        const r = await req.post();
        if (r.code > 100) {
            forEachRight(tableData.value, (v: ReportManagerModel, i: number) => {
                if (includes(ids, v.id)) {
                    tableData.value.splice(i, 1);
                }
            });
        }
    }
};
const onCloseDialog = async (arg?: any) => {
    if (dialogUpdateVisible.value) {
        await onRefresh();
        dialogUpdateVisible.value = false;
    }
};
const onRefresh = async () => {
    const req = new Request('费用报表定义查询');
    const r = await req.post();

    
    tableData.value.length = 0;

    if (!isEmpty(r.obj)) {
        tableData.value = r.obj;
    }
};
</script>
<style lang="scss" scoped>
.bg {
    margin-top: 10px;

    .btn {
        margin-right: 10px;
    }
}

</style>
